<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				overflow-x: hidden;
				overflow-y: auto;
			}

			.list {
				width: 300px;
				min-height: 520px;
				background-color: #DAD8D8;
			}

			.list .item {
				width: 300px;
				height: 50px;
				line-height: 50px;
				text-align: left;
				padding-left: 20px;
				border-bottom: 1px solid darkgray;
				cursor: pointer;
			}

			.list .item:nth-child(1) {
				background-color: rgba(0, 0, 0, .3);
				color: white;
			}

			.list .item:hover {
				background-color: rgba(0, 0, 0, .3);
				color: white;
			}
		</style>
	</head>
	<body>
		<ul class="list">
			<li class="item">王怡心</li>
			<li class="item">微信运动</li>
			<li class="item">吴彦</li>
			<li class="item">董志恒</li>
			<li class="item">徐书蕾</li>
			<li class="item">彭发现</li>
			<li class="item">岳家铭</li>
			<li class="item">豆豆</li>
			<li class="item">安子键</li>
			<li class="item">李俊</li>
			<li class="item">王迅</li>
			<li class="item">微信公众号</li>
		</ul>
		</div>
		<script type="text/javascript">
			var aLi = document.getElementsByTagName("li");
			var old1;
			function checkColor1() {
				for (var i = 0; i < aLi.length; i++) {
					if (window.getComputedStyle(aLi[i]).backgroundColor === "rgba(0, 0, 0, 0.3)") {
						old1 = i;
					}
				}
			}
			for (var i = 0; i < aLi.length; i++) {
				aLi[i].onclick = function() {
					checkColor1(); //调用函数,获得目前的old值
					if (old1 !== i) { //如果点击的不是默认样式本身,原来的默认样式哪一个改变
						this.style.backgroundColor = "rgba(0, 0, 0, 0.3)";
						this.style.color="white";
						
						aLi[old1].style.backgroundColor = " #DAD8D8";
						aLi[old1].style.color = "black";
					} else {
						this.style.backgroundColor = "rgba(0, 0, 0, 0.3)"; //如果点击的不是默认样式本身,原来的默认样式不变
					    this.style.color="white";
					}
				}

			}
		</script>
	</body>
</html>
